<template>
	<view class="content col-wrapper">
		<form class="form">
			<view class="uni-forms-item form-item ">
				<view class="title form-title" style="margin-right: 10px;">孕妇本人生日</view>
				<uni-datetime-picker class="form-value" type="datetime" v-model="form.birthDay" />
			</view>
			<view class="uni-forms-item form-item ">
				<view class="title">择日期间</view>
				<uni-datetime-picker type="daterange" v-model="form.birthDayRange" />
			</view>
			<view class="uni-forms-item form-item">
				<view class="title">胎儿性别</view>
				<radio-group class="row-wrapper form-value">
					<label class="row-wrapper label">
						<radio :value="form.gender" :checked="form.gender===1" />
						<view>男</view>
					</label>
					<label class="row-wrapper">
						<radio :value="form.gender" :checked="form.gender===2" />
						<view>女</view>
					</label>
					<label class="row-wrapper">
						<radio :value="form.gender" :checked="form.gender===3" />
						<view>未知</view>
					</label>
				</radio-group>
			</view>
			<view class="uni-forms-item form-item">
				<view class="title">医师可用时段</view>
				<checkbox-group v-model="form.dockterTimes">
					<label>
						<checkbox value="0713" :checked="true" color="#FFCC33" style="transform:scale(0.7)" />07时~13时
					</label>
					<label>
						<checkbox value="1319" :checked="true" color="#FFCC33" style="transform:scale(0.7)" />13时~19时
					</label>
					<label>
						<checkbox value="1923" :checked="false" color="#FFCC33" style="transform:scale(0.7)" />19时~23时
					</label>
					<label>
						<checkbox value="2307" :checked="false" color="#FFCC33" style="transform:scale(0.7)" />23时~07时
					</label>
				</checkbox-group>
			</view>
			<view class="uni-forms-item form-item">
				<view class="title">生肖冲煞</view>
				<radio-group class="row-wrapper form-value">
					<label class="row-wrapper label">
						<radio :value="form.chongsha" :checked="form.chongsha===1" />
						<view>避開生肖沖煞</view>
					</label>
					<label class="row-wrapper">
						<radio :value="form.chongsha" :checked="form.chongsha===2" />
						<view>允許生肖沖煞</view>
					</label>
				</radio-group>
			</view>
			<view class="uni-forms-item form-item">
				<view class="title">凶日</view>
				<radio-group class="row-wrapper form-value">
					<label class="row-wrapper label">
						<radio :value="form.xiongri" :checked="form.xiongri===1" />
						<view>避开黄历凶日</view>
					</label>
					<label class="row-wrapper">
						<radio :value="form.xiongri" :checked="form.xiongri===2" />
						<view>允许黄历凶日</view>
					</label>
				</radio-group>
			</view>
			<view class="uni-forms-item form-item">
				<view class="title">凶时</view>
				<radio-group class="row-wrapper form-value">
					<label class="row-wrapper label">
						<radio :value="form.xiongshi" :checked="form.xiongshi===1" />
						<view>避开黄历凶时</view>
					</label>
					<label class="row-wrapper">
						<radio :value="form.xiongshi" :checked="form.xiongshi===2" />
						<view>允许黄历凶时</view>
					</label>
				</radio-group>
			</view>
			<view class="uni-forms-item form-item">
				<view class="title">刀砧日</view>
				<radio-group class="row-wrapper form-value">
					<label class="row-wrapper label">
						<radio :value="form.daozhen" :checked="form.daozhen===1" />
						<view>避开刀砧日</view>
					</label>
					<label class="row-wrapper">
						<radio :value="form.daozhen" :checked="form.daozhen===2" />
						<view>允许刀砧日</view>
					</label>
				</radio-group>
			</view>
			<view class="uni-forms-item form-item">
				<view class="title">八字重量</view>
				<view class="items form-value">
					<picker :value="form.heavyIndex" mode="multiSelector" :range="heavy">
						<view>{{heavy[0][form.heavyIndex[0]]}}/{{heavy[1][form.heavyIndex[1]]}}</view>
					</picker>
				</view>
			</view>
		</form>
		<button @click="getResult()" class="submit" type="primary">开始择日</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '取名字/测名字',
				heavy: [
					["二两", "三两", "三两", "四两", "五两", "六两"],
					["一钱", "二钱", "三钱", "四钱", "五钱", "六钱", "七钱", "八钱", "九钱"]
				],

				form: {
					gender: 1, // 1- 男 2- 女
					birthDay: '',
					birthPlace: 1, // 1-南半球 2-北半球
					birthDayRange: [],
					dockterTimes: [],
					name: '',
					chongsha: 1,
					xiongri: 1,
					xiongshi: 1,
					daozhen: 2,
					heavyIndex: [0, 0]
				}
			}
		},
		onLoad() {

		},
		methods: {
			getResult() {
				uni.navigateTo({
					url: '/pages/CesareanSection/result'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		align-items: stretch;
		align-self: stretch;
		padding: 10px;

		.testName {
			justify-content: space-between;
			align-items: stretch;
		}

		.form {
			margin: 10px 0;

			.form-item {
				margin-top: 5px;

				.input {
					border: 1px solid #dcdfe6;
					height: 40px;
					border-radius: 4px;
					padding: 0 9px;
				}

				.form-value {
					margin-top: 5px;
				}
			}
		}
	}

	.label {
		margin-right: 10px;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.submit {
		align-self: stretch;
		width: 100%;
	}
</style>
